<template>
  <div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="规格"
        width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span size="medium">{{ scope.row.scfcName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="addNewScfc">
      <el-button type="text" @click="dialogVisible = true" style="font-size: larger">新增规格</el-button>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-input v-model="newScfc" placeholder="请输入新的规格"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addNewScfc">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div id="editScfc">
      <el-dialog
        title="提示"
        :visible.sync="dialogvisible"
        width="30%"
      >
        <el-input v-model="editScfc" placeholder="请输入更改后的规格"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogvisible = false">取 消</el-button>
    <el-button type="primary" @click="editScfcName">确 定</el-button>
  </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      newScfc: '', // 新的规格
      editScfc: '', // 修改后规格
      dialogVisible: false,
      dialogvisible: false,
      editScfcId: ''
    }
  },
  created: function () {
    this.$axios.post('product/querySpecification', { limit: 99, page: 1 })
      .then((res) => {
        this.list = res.data.data
      })
  },
  methods: {
    handleEdit (index, row) {
      this.dialogvisible = true
      this.editScfcId = row.scfcId
    },
    handleDelete (index, row) {
      window.console.log(index, row)
      this.$axios.post('product/delSpecification', {
        scfcId: row.scfcId
      }).then((res) => {
        if (res.data.code === 200) {
          alert(res.data.msg)
        }
      })
    },
    addNewScfc () {
      this.$axios.post('product/addSpecification', {
        scfcName: this.newScfc
      }).then((res) => {
        window.console.log(res)
        if (res.data.code === 200) {
          alert(res.data.msg)
          this.dialogVisible = false
          this.$axios.post('product/querySpecification', { limit: 99, page: 1 })
            .then((res) => {
              this.list = res.data.data
            })
        } else {
          alert(res.data.msg)
          this.dialogVisible = false
        }
      })
    },
    editScfcName () {
      this.$axios.post('product/editSpecification', {
        scfcId: this.editScfcId, scfcName: this.editScfc
      }).then((res) => {
        this.dialogvisible = false
        if (res.data.code === 200) {
          alert(res.data.msg)
          this.$axios.post('product/querySpecification', { limit: 99, page: 1 })
            .then((res) => {
              // window.console.log(res);
              this.list = res.data.data
            })
        } else {
          alert(res.data.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
  #addNewScfc{
    position:absolute;
    top:80px;
    left: 700px;
  }
</style>
